<template>
  <div>
    <!--
  el-tree
     data:树形数据
     props:{
      label:'label', // 默认显示的内容的字段名
      children:'children'  // 默认渲染子集的字段名
     }
     作用域插槽
         作用：可以自定义el-tree每一项的内容，同时传递了node,data
         node:当前项组件内的数据
         data：当前项的数据

     需求：
        广东
          深圳市
             宝安
               石岩
 -->
    <el-tree :data="list" :props="{label:'name',children:'child'}">
      <template #default="{data}">
        {{ data.name }}-----------------张三-------------------操作
        <!-- <el-button @click="treeItemClick(node,data)">查看数据</el-button> -->
      </template>
    </el-tree>

  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          name: '广东省',
          child: [
            {
              name: '深圳市',
              child: [
                {
                  name: '宝安区',
                  child: [
                    {
                      name: '石岩'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    treeItemClick(node, data) {
      console.log(node, data)
    }
  }

}
</script>
<style>
</style>
